<template>
  <div id="information">
    <div class="header"></div>
    <div class="content">
      <div class="group_details">
        <div class="img_bg">
          <div class="img_ring">
            <div class="img">
              <img :src="$host + groupMsg.groupImg" />
            </div>
          </div>
        </div>
        <div class="details_bg">
          <div class="group_id">群聊id: {{ groupMsg.groupId }}</div>
          <div class="total_number">总人数: {{ allUsers }}</div>
        </div>
      </div>
      <div class="group_members">群成员<br>
        <ul>
          <li v-for="(item, index) in qaqUsers"
              :key="index" class="link">
            <img :src="$host+item.userInfos[0].head"> <span class="username">{{item.userInfos[0].nickName}}</span>
          </li>
        </ul>

      </div>
    </div>
  </div>
</template>

<script>
  import { getGroupMember } from '@/utils/chatBox'

  export default {
    name: 'Information',
    props: ['groupId'],
    data() {
      return {
        allUsers: 0,            //群聊总人数
        groupMsg: {},              //群聊所有信息
        qaqUsers: [],           //本群所有成员
      }
    },
    methods: {
      async getGroupMember() {
        let { data: { data } } = await getGroupMember(this.groupId)
        this.allUsers = data.count
        this.groupMsg = data.group
        this.qaqUsers = data.qaqUsers
      }
    },
    created() {
      this.getGroupMember()
    }
  }
</script>

<style scoped>
  #information {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  /* 这是头部 */
  .header {
    height: 48px;
    background-color: #2f3136;
    box-shadow: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05),
      0 2px 0 rgba(4, 4, 5, 0.05);
  }
  /* 这是群信息 */
  .content {
    flex: 1;
    margin-top: 2px;
  }
  /* 这是群详情展示 */
  .group_details {
    position: relative;
    height: 180px;
    background-color: #4f545c;
  }

  .group_details .img_bg {
    position: relative;
    height: 80px;
    background-color: #2f3136;
  }
  .group_details .img_bg .img_ring {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 115px;
    height: 115px;
    border-radius: 50%;
    background-color: #4f545c;
    /* overflow: hidden; */
  }
  .group_details .img_bg .img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
  }
  .group_details .img_bg .img img {
    width: 100%;
    height: 100%;
  }
  .group_details .details_bg {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    font-size: 17px;
    color: #c7c8ca;
  }
  .group_details .details_bg .group_id {
    flex: 1;
    display: flex;
    justify-content: center;
  }
  .group_details .details_bg .total_number {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  /* 这是群主 */
  .content .group_leader {
    height: 42px;
    background-color: #4f545c;
  }
  /* 这是群成员 */
  .content .group_members {
    background-color: #4f545c;
  }
  .content .group_members ul li{
    padding: 4px;
    display: flex;
    align-items: center;
  }

  .content .group_members ul li img{
    border-radius: 50%;
    height: 42px;
  }
  .content .group_members ul li .username{
    color: #c7c8ca;
    padding-left: 5px;
  }
</style>